<template>
  <div class="body">
    <div class="search">
      <van-icon name="arrow-left" @click="onClickleft"/>
      <van-search
        v-model="value"
        placeholder="请输入搜索关键词"
        shape="round"
        @search="onSearch"
      >
   
      </van-search>
    </div>
    <div class="section">
      <van-tabs v-model="active">
        <van-tab title="孕期">
          <div class="tutu">
            <van-image width="100%" height="100%" src="https://img.yzcdn.cn/vant/cat.jpeg"/>
          </div>
          <van-row type="flex" justify="space-around">
            <div>
              <router-link to>
                <van-col class="tu" style="background:gray" span="6"></van-col>
                <p>孕前准备</p>
              </router-link>
            </div>
            <div>
              <router-link to>
                <van-col class="tu" style="background:gray" span="6"></van-col>
                <p>孕期检查</p>
              </router-link>
            </div>
            <div>
              <router-link to>
                <van-col class="tu" style="background:gray" span="6"></van-col>
                <p>孕期生活</p>
              </router-link>
            </div>
            <div>
              <router-link to>
                <van-col class="tu" style="background:gray" span="6"></van-col>
                <p>产后</p>
              </router-link>
            </div>
          </van-row>
          <div class="jieshao" v-for="(item,i) in list" :key='i'>
            <div class="left">
              <img :src="item.img" alt="">
            </div>
            <div class="right">
              <div class="p1">{{item.paragraph}}</div>
              <div class="p2">{{item.natural}}万人在读</div>
            </div>
          </div>
        </van-tab>
        <van-tab title="0~1岁">
          <div class="jieshao">
            <div class="left"></div>
            <div class="right">
              <div class="p1">孕妈吃对了，宝宝更聪明</div>
              <div class="p2">万人在读</div>
            </div>
          </div>
        </van-tab>
        <van-tab title="1~3岁">
          <div class="jieshao">
            <div class="left"></div>
            <div class="right">
              <div class="p1">孕妈吃对了，宝宝更聪明</div>
              <div class="p2">999万人在读</div>
            </div>
          </div>
        </van-tab>
        <van-tab title="3~6岁">
          <div class="jieshao" v-for="(item,i) in list" :key='i'>
            <div class="left">
              <img :src="item.img">
            </div>
            <div class="right">
              <div class="p1">{{item.paragraph}}</div>
              <div class="p2">{{item.natural}}万人在读</div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  name: "Encyclopedia",
  data() {
    return {
      value: "",
      active: 0,
      list:[]
    };
  },
  methods: {
    onSearch() {

      this.$router.push("/");
    },
    onClickleft(){
      this.$router.go(-1)
    }
  },
  mounted(){
    var that = this;
    axios({
      url:'http://www.remenber.com/api'
    }).then(function(data){
      that.list=data.data.list
    })
  },
  watch:{}
}
</script>
<style scoped>
.body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.section{
  flex:1;
  overflow:auto;
  margin-top:20px;
}
.search {
  height:30px;
  text-align: center;
  line-height: 60px;
  font-size: 20px
}
.fanhui {
  font-size: 12px;
}
.tutu {
  margin-left: 39px;
  margin-top: 20px;
  width: 303px;
  height: 120px;
  line-height: 20px;
  border-radius: 12px;
  background-color: rgba(240, 240, 240, 1);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0);
}
.van-image{
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 10px
}
.van-search{
  float: right;
  width: 90%;
}
.van-row{
  padding-top: 20px
}
.tu {
  width: 50px;
  height: 50px;
  border-radius: 50%;
   margin-bottom: 10px

}
.section p {
  font-size: 12px;
  text-align: center;
 
}
.jieshao {
  display: flex;
  flex-direction: row;
  left: 0px;
  top: 331px;
  width: 375px;
  height: 150px;
  line-height: 20px;
  background-color: rgba(242, 242, 242, 1);
  text-align: center;
  padding: 20px;
  box-sizing: border-box
}
.left {
  margin-top: 20px;
  left: 8px;
  top: 362px;
  width: 133px;
  height: 88px;
}
.right {
  margin-top: 20px;
  margin-left: 20px;
  left: 8px;
  top: 362px;
  height: 88px;
}
.right .p1 {
  width: 214px;
  height: 47px;
  line-height: 22px;
  background-color: rgba(242, 242, 242, 1);
  color: rgba(70, 69, 69, 1);
  font-size: 14px;
  text-align: left;
  font-family: Arial;
  border: 1px solid rgba(255, 255, 255, 0);
}
.right .p2 {
  left: 153px;
  top: 416px;
  width: 220px;
  height: 21px;
  line-height: 15px;
  background-color: rgba(242, 242, 242, 1);
  color: rgba(172, 170, 170, 1);
  font-size: 10px;
  text-align: left;

}
</style>
